<script setup lang="ts">
import { dateToDayjs } from '../ts/utils';

const props = withDefaults(defineProps<{
  type?: 'deposit' | 'withdraw';
}>(), {
  type: 'deposit',
});

const getConfigRef = computed(() => {
  const isDeposit = props.type === 'deposit';
  return {
    isDeposit,
    api: isDeposit ? apis.apiFundDepositRecord : apis.apiFundWithdrawRecord,
  };
});

const infoQry = useQuery({
  queryKey: [toRef(() => getConfigRef.value.api.id)],
  queryFn: () => getConfigRef.value.api({ page: 1, page_size: 2 }),
});

const listRef = computed(() => {
  const list: any[] = infoQry.data.value?.list ?? [];
  return list.slice(0, 2).map((x) => {
    const bigAmount = bignumber(x.amount);
    return {
      time: dateToDayjs(x.create_time)?.format('YYYY.M.D HH:mm') ?? '',
      amount: bigAmount.isNaN() ? bignumber(0) : bigAmount,
      currency: x.currency?.currency || x.currency,
    };
  });
});

const router = useRouter();

function toMorePage() {
  globalPopups.wallet.close();
  router.push({ name: RN.USER_TRANSATIONS, query: { active: getConfigRef.value.isDeposit ? 0 : 1 } });
}
</script>

<template>
  <div v-show="listRef.length" class="w-full text-sm text-sys-text-body">
    <div class="divider-h-gradual mb-3" />
    <div class="mb-1 w-full flex-between">
      <div>{{ $t('vFPoi3f0wY6wKfT5qeJk') }}</div>
      <div class="cursor-pointer" @click="toMorePage">
        {{ $t('3cLtwKftAuweWvWo0yL9Z') }}
      </div>
    </div>
    <div class="grid grid-cols-[auto_1fr] mt-1.5 gap-x-4 gap-y-1.5 text-[13px]">
      <template v-for="(item, idx) of listRef" :key="idx">
        <div>{{ item.time }}</div>
        <div class="w-full text-right">
          <TAmount :value="item.amount" :symbol="item.currency" format="pad-dec" colored="pos" />
        </div>
      </template>
    </div>
  </div>
</template>
